<template>
  <div>
       <div class="card-header">
           <slot name="header"></slot>
       </div>
       <div class="card-content">
          <slot name="content"></slot>
       </div>
       <div class="card-charts">
            <slot name="charts"></slot>
       </div>
       <div class="card-footer">
         <slot name="footer"></slot>
       </div>
  </div>
</template>

<script>
export default {
  name: '',
}
</script>

<style scoped lang="scss">
  //定义scss的变量
  $color:yellowgreen;
   .card-header{
     display:flex;
     justify-content: space-between;
     span{
       color:$color
     }
   }
   .card-content{
     margin:10px 0px;
     span{
       font-size:30px;
       color:$color;
     }
   }
   .card-charts{
     height: 50px;
     line-height: 50px;
     border-bottom:1px solid #eee;
     span{
       font-size: 14px;
       color: black;
     }
   }
   .card-footer{
      padding:10px 0px;
      color: $color;
   }
   .card-footer{
     span{
       font-size: 14px;
     }
   }
</style>
